<!DOCTYPE html>
<html lang="zh-CN" data-theme="light">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户登录</title>
    <!-- Tailwind CSS 和 DaisyUI 5.0 -->
    <link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css" />
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        .login-container {
            transition: all 0.3s ease;
        }

        .feature-card {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
        }

        .input-field:focus {
            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
        }

        .login-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 25px -5px rgba(99, 102, 241, 0.4);
        }

        .card-side {
            display: flex;
            flex-direction: row;
        }

        @media (max-width: 1024px) {
            .card-side {
                flex-direction: column;
            }
        }
    </style>
</head>

<body
    class="min-h-screen flex items-center justify-center bg-gradient-to-br from-indigo-50 via-purple-50 to-pink-50 p-4">
    <div class="login-container w-full max-w-6xl">
        <div class="card card-side bg-base-100 shadow-2xl rounded-3xl overflow-hidden">
            <!-- 左侧装饰区域 -->
            <div
                class="hidden lg:flex flex-col justify-between w-2/5 bg-gradient-to-br from-indigo-600 via-purple-600 to-pink-500 p-12 text-white">
                <div>
                    <h2 class="text-4xl font-bold mb-6">微信公众号管理</h2>
                    <p class="text-xl opacity-90 mb-8">智能关键词回复系统</p>
                </div>

                <div class="space-y-6">
                    <div class="feature-card flex items-center space-x-4 p-4 rounded-xl bg-white/10 backdrop-blur-sm">
                        <div class="avatar placeholder">
                            <div
                                class="bg-indigo-400 text-white rounded-full w-12 h-12 flex items-center justify-center">
                                <i class="fas fa-robot text-xl relative top-3 left-3"></i>
                            </div>
                        </div>
                        <div>
                            <h3 class="font-bold">智能回复</h3>
                            <p class="text-sm opacity-80">关键词自动响应</p>
                        </div>
                    </div>

                    <div class="feature-card flex items-center space-x-4 p-4 rounded-xl bg-white/10 backdrop-blur-sm">
                        <div class="avatar placeholder">
                            <div
                                class="bg-purple-400 text-white rounded-full w-12 h-12 flex items-center justify-center">
                                <i class="fas fa-bolt text-xl relative top-3 left-3"></i>
                            </div>
                        </div>
                        <div>
                            <h3 class="font-bold">极速响应</h3>
                            <p class="text-sm opacity-80">毫秒级处理速度</p>
                        </div>
                    </div>

                    <div class="feature-card flex items-center space-x-4 p-4 rounded-xl bg-white/10 backdrop-blur-sm">
                        <div class="avatar placeholder">
                            <div class="bg-pink-400 text-white rounded-full w-12 h-12 flex items-center justify-center">
                                <i class="fas fa-cogs text-xl relative top-3 left-3"></i>
                            </div>
                        </div>
                        <div>
                            <h3 class="font-bold">灵活配置</h3>
                            <p class="text-sm opacity-80">自定义关键词规则</p>
                        </div>
                    </div>
                </div>

                <div class="mt-8 text-center text-white/80 text-sm">
                    <p>© 2023 公司名称. 保留所有权利</p>
                </div>
            </div>

            <!-- 右侧登录表单 -->
            <div class="w-full lg:w-3/5 p-8 md:p-12 lg:p-16">
                <div class="text-center mb-10">
                    <div class="avatar mb-6 flex justify-center">
                        <div
                            class="w-20 h-20 rounded-full bg-gradient-to-r from-indigo-500 to-purple-500 flex items-center justify-center mx-auto">
                            <i class="fas fa-user-lock text-white text-2xl relative top-7"></i>
                        </div>
                    </div>
                    <h1 class="text-3xl font-bold text-gray-800">登录账户</h1>
                    <p class="text-gray-500 mt-2">请输入您的登录信息</p>
                </div>
                <!-- 在表单上方添加错误提示区域 -->
                <div id="errorAlert" class="hidden mb-6">
                    <div role="alert" class="alert alert-error">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0 stroke-current" fill="none"
                            viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                        <span id="errorMessage">Error! Task failed successfully.</span>
                    </div>
                </div>
                <form class="space-y-6">
                    <!-- 用户名输入 -->
                    <div class="space-y-2">
                        <label class="floating-label">
                            <span>用户名</span>
                            <input type="text" placeholder="请输入用户名或邮箱"
                                class="input-field input input-bordered w-full  h-14 text-base focus:outline-none rounded-xl border-gray-300 focus:border-indigo-500 transition-all" />

                        </label>
                    </div>

                    <!-- 密码输入 -->
                    <div class="space-y-2">
                        <label class="floating-label">
                            <span>密码</span>
                            <input type="password" placeholder="请输入密码"
                                class="input-field input input-bordered w-full  h-14 text-base focus:outline-none rounded-xl border-gray-300 focus:border-indigo-500 transition-all" />
                            <div
                                class="absolute inset-y-0 right-0 flex items-center pr-4 cursor-pointer text-gray-400 hover:text-gray-600">
                                <i class="fas fa-eye"></i>
                            </div>
                        </label>
                    </div>

                    <!-- 记住我 -->
                    <div class="flex items-center justify-between">
                        <label class="flex items-center cursor-pointer">
                            <input type="checkbox"
                                class="checkbox checkbox-primary rounded-lg [--chkbg:theme(colors.indigo.500)] [--chkfg: white]" />
                            <span class="label-text ml-2 text-gray-600">记住我</span>
                        </label>
                        <a href="#" class="text-indigo-500 hover:underline text-sm">忘记密码？</a>
                    </div>

                    <!-- 登录按钮 -->
                    <div class="pt-4">
                        <button type="submit"
                            class="login-btn btn btn-primary w-full h-14 text-lg font-bold rounded-xl transition-all duration-300 bg-gradient-to-r from-indigo-500 to-purple-500 border-0 shadow-lg">
                            <i class="fas fa-sign-in-alt mr-2"></i>
                            登录账户
                        </button>
                    </div>

                    <!-- 注册链接 -->
                    <div class="text-center pt-6">
                        <p class="text-gray-600">
                            还没有账户？
                            <a href="#" class="text-indigo-500 font-medium hover:underline">立即注册</a>
                        </p>
                    </div>
                </form>

                <!-- 移动端底部信息 -->
                <div class="lg:hidden text-center text-gray-500 text-sm mt-10">
                    <p>© 2023 公司名称. 保留所有权利</p>
                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        // 密码显示/隐藏功能
        $(document).ready(function () {
            const eyeIcon = $('.fa-eye');
            const passwordInput = $('input[type="password"]');

            if (eyeIcon.length && passwordInput.length) {
                eyeIcon.on('click', function () {
                    if (passwordInput.attr('type') === 'password') {
                        passwordInput.attr('type', 'text');
                        $(this).removeClass('fa-eye').addClass('fa-eye-slash');
                    } else {
                        passwordInput.attr('type', 'password');
                        $(this).removeClass('fa-eye-slash').addClass('fa-eye');
                    }
                });
            }
            // 表单提交处理
            const loginForm = $('form');
            if (loginForm.length) {
                loginForm.on('submit', function (e) {
                    e.preventDefault();

                    // 隐藏之前的错误提示
                    $('#errorAlert').addClass('hidden');

                    // 获取表单数据
                    const username = $('input[type="text"]').val();
                    const password = passwordInput.val();

                    // 简单验证
                    if (!username || !password) {
                        showError('请输入用户名和密码');
                        return;
                    }

                    // 发送登录请求
                    $.ajax({
                        url: 'http://8.138.111.65:8000/api/v1/auth/login',
                        method: 'POST',
                        contentType: 'application/json',
                        data: JSON.stringify({
                            username: username,
                            password: password
                        }),
                        success: function (response) {
                            // 登录成功处理
                            console.log('登录成功', response);
                            if (response.access_token) {
                                // 登录成功，保存token
                                localStorage.setItem('token', response.access_token);
                                // 跳转到主页
                                window.location.href = '/index.html';
                            } else {
                                showError('登录失败，请检查用户名和密码');
                            }
                                
                        },
                        error: function (xhr, status, error) {
                            // 登录失败处理
                            console.error('登录失败', xhr.responseText);
                            const errorMessage = xhr.responseJSON?.message || '登录失败，请检查用户名和密码';
                            showError(errorMessage);
                        }
                    });
                });
            }

            // 显示错误信息的函数（优化的淡入淡出）
            function showError(message) {
                // 清除之前的定时器
                if (window.errorTimeout) {
                    clearTimeout(window.errorTimeout);
                }

                $('#errorMessage').text(message);
                $('#errorAlert')
                    .removeClass('hidden')
                    .hide()
                    .fadeIn(400); // 400ms 淡入，更柔和

                // 3秒后自动隐藏错误提示
                window.errorTimeout = setTimeout(function () {
                    $('#errorAlert').fadeOut(500, function () { // 500ms 淡出，更柔和
                        $(this).addClass('hidden');
                    });
                }, 3000);
            }
        });
    </script>
</body>

</html>